<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta content="width=device-width,user-scale=1.0" name="viewport">
	  <title>Dream</title>
    <link href="../img/doraemon.ico" rel="icon">
    <link href="../out/bootstrap4/css/bootstrap.min.css" rel="stylesheet">
    <link href="../out/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="../css/normal.css" rel="stylesheet">
    <link href="../css/header.css" rel="stylesheet">
    <script src="../out/bootstrap4/js/jquery-3.6.1.min.js"></script>
    <script src="../out/bootstrap4/js/bootstrap.bundle.min.js"></script>
  </head>
  <body style="min-width: 280px">
	<header>
	  <div class="myNav container-fluid">
        <div class="row">
		  <div class="col-12">
			<nav class="navbar navbar-expand-sm navbar-dark">
			  <!-- Brand -->
			  <a class="navbar-brand d-flex" href="../index.html"><img alt="img" src="../img/doraemon_logo.png"
				  style="width: 3rem"><span
				  style="font-family: '方正少儿_GBK',serif;color: white;font-size: 2rem;">哆啦A梦</span></a>

			  <!-- Toggler/collapsibe Button -->
			  <button class="navbar-toggler" data-target="#collapsibleNavbar" data-toggle="collapse"
				type="button">
				<span class="navbar-toggler-icon"></span>
			  </button>

			  <!-- Navbar links -->
			  <div class="collapse navbar-collapse" id="collapsibleNavbar">
				<ul class="navbar-nav w-100 justify-content-center align-items-end align-items-sm-center">
				  <li class="nav-item">
					<a class="nav-link p-1" href="../index.html">首页</a>
				  </li>
				  <li class="nav-item">
					<a class="nav-link p-1" href="recommend.html">推荐</a>
				  </li>
				  <li class="nav-item">
					<a class="nav-link p-1 " href="special.html">专题</a>
				  </li>
				  <li class="nav-item">
					<a class="nav-link p-1" href="film.html">剧场版</a>
				  </li>
				  <li class="nav-item">
					<a class="nav-link p-1 " href="play.html">视频</a>
				  </li>
				  <li class="nav-item">
					<a class="d-block d-sm-none border login p-1 rounded nav-link active" href="#">注册/登录</a>
				  </li>
				</ul>
			  </div>
			  <a class="d-none d-sm-block border p-1 rounded nav-link login active" href="#">注册/登录</a>
			</nav>
		  </div>
        </div>
	  </div>
	</header>
	<div class="mySlide container-fluid">
	  <div class="row">
        <div class="col-12 p-0 m-0">
		  <img class="w-100" src="../img/doraemo_bg_1.jpg">
        </div>
	  </div>
	</div>
	<!--content-->
	<div class="myContent container">
	  <div class="row bg-light p-5">
		<div class="col-lg-12 justify-content-center d-flex"><span class="font-weight-bold">注册/登录</span></div>
		<div class="mt-3 mb-3 col-lg-12 justify-content-center d-flex"><span
            class="font-weight-bold text-primary">——</span></div>
		<div class="col-lg-8 offset-lg-2 p-4 d-flex justify-content-center">
		  <form action="" class="was-validated w-100" autocomplete="off">
			<div class="form-group">
			  <label for="uname">用户名:</label>
			  <input type="text" class="form-control" id="uname" placeholder="Enter username" minlength="3" name="uname" required>
			  <div class="valid-feedback">验证成功！</div>
			  <div class="invalid-feedback">请输入用户名(至少三位)！</div>
			</div>
			<div class="form-group">
			  <label for="pwd">密码:</label>
			  <input type="password" class="form-control" id="pwd" placeholder="Enter password" minlength="8" name="pswd" required>
			  <div class="valid-feedback">验证成功！</div>
			  <div class="invalid-feedback">请输入密码(至少八位)！</div>
			</div>
			<div class="form-group">
			  <label for="isPwd">确认密码:</label>
			  <input type="password" class="form-control" id="isPwd" placeholder="Enter password" minlength="8" name="isPswd" required>
			  <div class="valid-feedback" id="ok">验证成功！</div>
			  <div class="invalid-feedback" id="no">请再次输入！</div>
			</div>
			<div class="form-group">
			  <label for="tel">手机号码:</label>
			  <input type="tel" class="form-control" id="tel" placeholder="Enter telephone" maxlength="11" minlength="11" name="tel" required>
			  <div class="valid-feedback">验证成功！</div>
			  <div class="invalid-feedback">请输入手机号码(十一位)！</div>
			</div>
			<div class="form-group">
			  <label for="email">邮箱:</label>
			  <input type="email" class="form-control" id="email" placeholder="Enter e-mail" name="email" required>
			  <div class="valid-feedback">验证成功！</div>
			  <div class="invalid-feedback">请输入邮箱地址！</div>
			</div>
			<div class="form-group form-check">
			  <label class="form-check-label">
				<input class="form-check-input" type="checkbox" name="remember" required> 同意<a href="#">协议</a>
				<div class="valid-feedback">验证成功！</div>
				<div class="invalid-feedback">同意协议才能提交。</div>
			  </label>
			</div>
			<button type="submit" class="btn btn-primary">注册</button>
		  </form>
		</div>
	  </div>
	</div>
<footer class="m-0 p-0">
	  <div class="container-fluid bg-dark p-3">
        <div class="row">
			<div class="col-12 col-lg-4 offset-lg-0 col-md-5 offset-md-0 col-sm-5 offset-sm-0 d-flex align-items-center justify-content-center justify-content-sm-start">
				<img alt="..."
			  src="../img/doraemon_logo.png"
			  style="width: 2rem">
			<span style="font-family: '方正少儿_GBK',serif;color: white;font-size: 1.5rem;">哆啦A梦</span>
		  </div>
		  <div class="col-12 col-lg-4 offset-lg-4 col-md-5 offset-md-2 col-sm-7 offset-sm-0 d-flex align-items-center justify-content-center justify-content-sm-end">
			<ul class="nav">
			  <li class="nav-item">
				<a class="nav-link" href="#"><i class="fa fa-twitter bg-light p-2 rounded-circle text-dark"
					style="font-size: 1.5rem"></i></a>
			  </li>
			  <li class="nav-item">
				<a class="nav-link" href="#"><i class="fa fa-weibo bg-light p-2 rounded-circle text-dark"
					style="font-size: 1.5rem"></i></a>
			  </li>
			  <li class="nav-item">
				<a class="nav-link" href="#"><i class="fa fa-wechat bg-light p-2 rounded-circle text-dark"
					style="font-size: 1.5rem"></i></a>
			  </li>
			</ul>
		  </div>
        </div>
	  </div>
	</footer>
    <script src="../js/normal.js"></script>
    <script>
    	let pwd = document.getElementById("pwd");
        let isPwd = document.getElementById("isPwd");
        isPwd.addEventListener("input",function(){
        	if(isPwd.value!==pwd.value){
                	isPwd.style.backgroundColor="red";
                    }else{
                    isPwd.style.backgroundColor="white";
                    			//isPwd.classList.toggle("valid-feedback");
                    }
        });
    </script>
  </body>
</html>